<template>
	<a-drawer 
		:title="title" 
		:closable="false" 
		:visible="visible"
		:width="width"
		destroyOnClose	
		@close="() => this.$emit('close')"
	>
		<div class="table-content">
			<a-button class="cu-btn-primary" icon="plus" style="margin: 10px;" @click="handleAdd">{{$ct("addLayout", "新增布局") }}</a-button>
			<a-table :columns="columns" :data-source="layoutData">
				<span slot="renderSerial" slot-scope="text, record, index">
					{{ index + 1 }}
				</span>
				<template slot="renderAction" slot-scope="text, record">
					<a @click="handleEdit(record)">{{$ct("edit", "编辑") }}</a>
					<span class="action-margin"></span>
					<a-popconfirm title="确定要删除这个布局吗?" @confirm="handleDel(record)">
						<a class="action-delete">{{ $ct("delete", "删除") }}</a>
					</a-popconfirm>
				</template>
			</a-table>
		</div>

		<t-modal :title="modalTitle" :visible="modalVisible" :destroyOnClose="true" @cancel="() => modalVisible = false">
			<template slot="footer">
				<a-button @click="() => modalVisible = false">
					取消
				</a-button>
				<a-button type="primary" @click="handleOk('save')">
					保存
				</a-button>
				<a-button type="primary" @click="handleOk('design')">
					保存并设计
				</a-button>
			</template>
			<a-form :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
				<a-form-item label="名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<a-input v-decorator="['layoutName', { rules: [{ required: true, message: '请输入名称!' }] }]" placeholder="请输入名称"/>
				</a-form-item>
				<a-form-item label="编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<a-input 
						v-decorator="['layoutCode', 
						{ rules: [
							{ required: true, message: '请输入编码!' },
							{ pattern: /^[a-zA-Z0-9]+$/, message: '只能输入数字和字母!' }
						]}]" 
						placeholder="请输入编码"
					/>
				</a-form-item>
				<a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<a-input-number :min="0" :max="999" v-decorator="['layoutSort', { rules: [{ required: true, message: '请输入排序!' }] }]" placeholder="请输入排序"/>
				</a-form-item>
				<a-form-item class="hiddenItem">
					<a-input v-decorator="['uuid']" disabled type="hidden" />
				</a-form-item>
			</a-form>
		</t-modal>
	</a-drawer>
</template>

<script>
	const fields = ["uuid", "layoutName", "layoutCode", "layoutSort"];
	export default {
		props: {
			visible: {
				type: Boolean,
				default: false,
			},
			title: {
				type: String,
				default: '表单布局',
			},
			width: {
				type: String|Number,
			},
			uuid: {
				type: String,
				require: true,
			}
		},
		watch: {
			visible(val) {
				if (val) {
					this.getData()
				}
			}
		},
		created() {
			fields.forEach((v) => this.form.getFieldDecorator(v));
		},
		data() {
			return {
				labelCol: {
					xs: {
						span: 24,
					},
					sm: {
						span: 4,
					},
				},
				wrapperCol: {
					xs: {
						span: 24,
					},
					sm: {
						span: 18,
					},
				},
				form: this.$form.createForm(this),
				columns: [
					{
						title: "序号",
						width: 50,
						align: "center",
						scopedSlots: { customRender: "renderSerial" },
					},
					{
						title: "名称",
						dataIndex: "layoutName",
					},
					{
						title: "编码",
						dataIndex: "layoutCode",
					},
					{
						title: "排序",
						dataIndex: "layoutSort",
					},
					{
						title: "操作",
						dataIndex: "action",
						width: 100,
						align: "center",
						scopedSlots: { customRender: "renderAction"},
					}
				],
				layoutData: [],
				modalVisible: false,
				modalTitle: '',
				fromJson: {},
			}
		},
		methods: {
			// 获取数据
			getData() {
				this.$get(`/form/formLayout/getPageSet?uuid=${this.uuid}`).then(res => {
					this.layoutData = res.data.rows;
				})
			},
			// 新增
			handleAdd() {
				this.modalTitle = '新增布局';
				this.modalVisible = true;
			},
			// 编辑
			handleEdit(record) {
				fields.forEach((v) => this.form.getFieldDecorator(v));
				this.modalTitle = '编辑布局';
				this.form.setFieldsValue({
					layoutName:record.layoutName,
					layoutCode:record.layoutCode,
					layoutSort:record.layoutSort,
					uuid:record.uuid
				})
				this.modalVisible = true;
				this.fromJson = record.designJson ? record.designJson : null
			},
			// 删除
			handleDel(record) {
				this.$post('/form/formLayout/deleteBatch',{uuid:record.uuid}).then(res => {
					if (res.statusCode === 200) {
						this.$message.success('删除成功');
						this.getData();
					}else {
						this.$message.error(res.message);
					}
				})
			},
			handleOk(type) {
				this.form.validateFields((err, values) => {
					if (!err) {
						let params = {
							basicConfigureUuid:this.uuid,
							...values
						}
						if (!params.uuid) {
							// 新增
								if (type === 'save') {
								this.$post('/form/formLayout/save', params).then(res => {
									if (res.statusCode === 200) {
										this.$message.success('新增成功');
										this.getData();
										this.modalVisible = false;
										this.form.resetFields();
									} else {
										this.$message.error(res.message);
									}
								})
							} else {
								this.$emit('handleAdd', params);
								this.modalVisible = false;
								this.form.resetFields();
							}
						} else {
							// 编辑
							if (type === 'save') {
								this.$post('/form/formLayout/update', params).then(res => {
									if (res.statusCode === 200) {
										this.$message.success('编辑成功');
										this.getData();
										this.modalVisible = false;
										this.form.resetFields();
									} else {
										this.$message.error(res.message);
									}
								})
							} else {
								params = {
									...params,
									fromJson:this.fromJson,
								};
								this.$emit('handleAdd', params);
								this.modalVisible = false;
								this.form.resetFields();
							}
						}
					}
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
/deep/.ant-drawer-body {
	padding: 10px !important;
}
</style>